

<style>
	body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* Page reset */
	margin:0px;
	padding:0px;
}

body{
	/* Setting default text color, background and a font stack */
	color:#444444;
	font-size:13px;
	background: #f2f2f2;
	font-family:Arial, Helvetica, sans-serif;
}

/* Gallery styles */

#gallery{
	/* CSS3 Box Shadow */
	-moz-box-shadow:0 0 3px #AAAAAA;
	-webkit-box-shadow:0 0 3px #AAAAAA;
	box-shadow:0 0 3px #AAAAAA;
	
	/* CSS3 Rounded Corners */
	
	-moz-border-radius-bottomleft:4px;
	-webkit-border-bottom-left-radius:4px;
	border-bottom-left-radius:4px;
	
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;
	border-bottom-right-radius:4px;
	
	border:1px solid white;
	
	background:url(css/menu/galleryimg/panel.jpg) repeat-x bottom center #ffffff;
	
	/* The width of the gallery */
	width:920px;
	overflow:hidden;
}

#slides{
	/* This is the slide area */
	height:400px;
	
	/* jQuery changes the width later on to the sum of the widths of all the slides. */
	width:920px;
	overflow:hidden;
}

.slide{
	float:left;
}

#galleryMenu{
	/* This is the container for the thumbnails */
	height:45px;
}

#galleryMenu ul{
	margin:0px;
	padding:0px;
}

#galleryMenu ul li{
	/* Every thumbnail is a li element */
	width:60px;
	display:inline-block;
	list-style:none;
	height:45px;
	overflow:hidden;
}

#galleryMenu ul li.inact:hover{
	/* The inactive state, highlighted on mouse over */
	background:url(css/menu/galleryimg/pic_bg.png) repeat;
}

#galleryMenu ul li.act,#galleryMenu ul li.act:hover{
	/* The active state of the thumb */
	background:url(css/menu/galleryimg/active_bg.png) no-repeat;
}

#galleryMenu ul li.act a{
	cursor:default;
}

.fbar{
	/* The left-most vertical bar, next to the first thumbnail */
	width:2px;
	background:url(css/menu/galleryimg/divider.png) no-repeat right;
}

#galleryMenu ul li a{
	display:block;
	background:url(css/menu/galleryimg/divider.png) no-repeat right;
	height:35px;
	padding-top:10px;
}

a img{
	border:none;
}


/* The styles below are only necessary for the demo page */

h1{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:36px;
	font-weight:normal;
	margin-bottom:15px;
}

h2{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	position:absolute;
	right:0;
	text-transform:uppercase;
	top:15px;
}

#galleryMain{
	/* The galleryMain container */
	margin:15px auto;
	text-align:center;
	width:920px;
	position:relative;
}

a, a:visited {
	color:#0196e3;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

p{
	padding:10px;
	text-align:center;
}

</style>
<div id="galleryMain">

  <div id="gallery">
	
    <div id="slides">
        <div class="slide">

		<div>
		<?php
		if($goGeo){
			$i=0;
			foreach ($goGeo as $g){
				if($i%4==0){
		?>
		</div><div>
		<?php
					
				}
				
				
		?>	
	<script> 

		$("<?php echo '#'.$g->goodsName?>").click(function(event){
			choiceFacility(<?php echo json_encode($g)?>);
			$.fancybox.close();
	  	});
	  
	</script>			
    	<img class='geometry' id="<?php echo $g->goodsName ?>" src="<?php echo $g->thumbPath?>" width="230" height="100" alt="<?php echo $g->geometry?>" />

    	<?php $i++;}}?>
    	</div>

    </div>
  
    
    <!--<div class="slide"><img src="thumbs/macbook.jpg" width="920" height="400" alt="side" /></div>-->
    <div class="slide"><img src="thumbs/iphone.jpg" width="920" height="400" alt="side" /></div>
    <div class="slide"><img src="thumbs/imac.jpg" width="920" height="400" alt="side" /></div>
    <div class="slide">
    	<a href="http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/" target="_blank">
    		<img src="thumbs/info.jpg" width="920" height="400" alt="side" /></a></div>
      
    </div>
    
    <div id="galleryMenu">
    
    <ul>
        <li class="fbar">&nbsp;</li>
        <li class="menuItem">
        	<a href=""><img src="thumbs/thumb_macbook.png" alt="thumbnail" /></a>
        </li>
        <li class="menuItem">
        	<a href=""><img src="thumbs/thumb_iphone.png" alt="thumbnail" /></a>
        </li>
        <li class="menuItem">
        	<a href=""><img src="thumbs/thumb_imac.png" alt="thumbnail" /></a>
        </li>
        <li class="menuItem">
        	<a href=""><img src="thumbs/thumb_about.png" alt="thumbnail" /></a>
        </li>
    </ul>
    
    
    </div>
    
  </div>
    
</div>
<script>
	
	$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */
	
	var totWidth=0;
	var positions = new Array();
	
	$('#slides .slide').each(function(i){
		
		/* Traverse through all the slides and store their accumulative widths in totWidth */
		
		positions[i]= totWidth;
		totWidth += $('#galleryMain').width();
		
		/* The positions array contains each slide's commulutative offset from the left part of the container */
		
		if(!$('#galleryMain').width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}
		
	});
	
	$('#slides').width(totWidth);

	/* Change the cotnainer div's width to the exact width of all the slides combined */

	$('#galleryMenu ul li a').click(function(e,keepScroll){

			/* On a thumbnail click */

			$('li.menuItem').removeClass('act').addClass('inact');
			$(this).parent().addClass('act');
			
			var pos = $(this).parent().prevAll('.menuItem').length;
			
			$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
			/* Start the sliding animation */
			
			e.preventDefault();
			/* Prevent the default action of the link */
			
			
			// Stopping the auto-advance if an icon has been clicked:
			if(!keepScroll) clearInterval(itvl);
	});
	
	$('#galleryMenu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */
	
	
	
	/*****
	 *
	 *	Enabling auto-advance.
	 *
	 ****/
	 
	var current=1;
	function autoAdvance()
	{
		if(current==-1) return false;
		
		$('#galleryMenu ul li a').eq(current%$('#galleryMenu ul li a').length).trigger('click',[true]);	// [true] will be passed as the keepScroll parameter of the click function on line 28
		current++;
	}

	// The number of seconds that the slider will auto-advance in:
	
	var changeEvery = 10;

	var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);

	/* End of customizations */
});
</script>